<template>
	<view class="group-list-container">
		<!-- 筛选区域 -->
		<view class="filter-section">
			<scroll-view scroll-x class="filter-scroll" :show-scrollbar="false">
				<view class="filter-wrap">
					<view 
						v-for="(item, index) in filterOptions" 
						:key="index"
						class="filter-item"
						:class="{'active': currentType === item.value}"
						@click="handleFilterChange(item.value)"
					>
						{{item.label}}
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 列表区域 -->
		<scroll-view 
			scroll-y 
			class="group-list"
			@scrolltolower="handleLoadMore"
			refresher-enabled
			:refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh"
		>
			<view class="list-wrapper">
				<!-- 无数据展示 -->
				<view v-if="groupList.length === 0 && !loading" class="empty-box">
					<image src="/static/empty.png" mode="aspectFit" class="empty-icon"></image>
					<text class="empty-text">暂无团队成员</text>
				</view>
				
				<!-- 成员列表 -->
				<template v-else>
					<view class="member-item" v-for="(item, index) in groupList" :key="index">
						<view class="member-info">
							<view class="member-left">
								<image class="avatar" :src="item.avatar || '/static/avatar-default.png'" mode="aspectFill"></image>
								<view class="member-detail">
									<text class="nickname">{{item.nickname}}</text>
									<text class="stat-item" :class="{'status-success': item.is_subscribe, 'status-fail': !item.is_subscribe}">
										{{item.is_subscribe ? '已关注' : '未关注'}}
									</text>
								</view>
							</view>
							<view class="member-right">
								<view class="data-row">
									<text class="data-label">预计补贴</text>
									<text class="data-value" :class="{'inactive': !item.fee_total || item.fee_total === '0.00'}">￥{{item.fee_total || '0.00'}}</text>
								</view>
								<view class="data-row">
                                    <text class="data-label">订单数</text>
									<text class="data-value" :class="{'inactive': item.order_count === 0}">{{item.order_count}}笔</text>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 加载状态 -->
					<view class="loading-more" v-if="loading">
						<view class="loading-icon"></view>
						<text class="loading-text">加载中...</text>
					</view>
					
					<!-- 无更多数据 -->
					<view v-if="!hasMore && groupList.length > 0" class="no-more">
						<text class="no-more-text">没有更多数据了</text>
					</view>
				</template>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import request from '@/utils/request'

export default {
	data() {
		return {
			filterOptions: [
				{ label: '今天', value: 'today' },
				{ label: '昨天', value: 'yesterday' },
				{ label: '本月', value: 'current_month' },
				{ label: '上月', value: 'last_month' },
                { label: '近一年', value: '' }
			],
			currentType: 'today', // 当前选中的筛选类型
			groupList: [], // 团队列表
			page: 1, // 当前页码
			hasMore: true, // 是否有更多数据
			loading: false, // 加载状态
			isRefreshing: false // 刷新状态
		}
	},
	onShow() {
		this.getGroupList()
	},
	methods: {
		// 获取团队列表
		async getGroupList() {
			if (this.loading) return
			this.loading = true
			
			try {
				const res = await request({
					url: '/wechat/group/lists',
					data: {
						page: this.page,
						type: this.currentType
					}
				})
				
				if (res.code === 0 && res.data) {
					if (this.page === 1) {
						this.groupList = res.data.data
					} else {
						this.groupList = [...this.groupList, ...res.data.data]
					}
					this.hasMore = !!res.data.next_page_url
				}
			} catch (err) {
				console.error('获取团队列表失败', err)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			} finally {
				this.loading = false
				if (this.isRefreshing) {
					this.isRefreshing = false
				}
			}
		},
		
		// 处理筛选变更
		handleFilterChange(type) {
			if (this.currentType === type) return
			this.currentType = type
			this.page = 1
			this.groupList = []
			this.hasMore = true
			this.getGroupList()
		},
		
		// 下拉刷新
		onRefresh() {
			this.isRefreshing = true
			this.page = 1
			this.groupList = []
			this.hasMore = true
			this.getGroupList()
		},
		
		// 加载更多
		handleLoadMore() {
			if (this.hasMore && !this.loading) {
				this.page++
				this.getGroupList()
			}
		}
	}
}
</script>

<style>
.group-list-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f6f7fb;
}

.filter-section {
	position: sticky;
	top: 0;
	z-index: 1;
	background-color: #ffffff;
	border-bottom: 2rpx solid #f5f5f5;
	padding: 12rpx 0;
}

.filter-scroll {
	white-space: nowrap;
}

.filter-wrap {
	display: inline-flex;
	padding: 0 20rpx;
}

.filter-item {
	padding: 12rpx 32rpx;
	margin: 0 8rpx;
	font-size: 28rpx;
	color: #666666;
	background-color: #f8f9fc;
	border-radius: 28rpx;
	transition: all 0.3s;
	position: relative;
}

.filter-item.active {
	color: #ffffff;
	background: linear-gradient(135deg, #2b85ff, #5ea4ff);
	box-shadow: 0 4rpx 12rpx rgba(43, 133, 255, 0.2);
	transform: translateY(-2rpx);
}

.filter-item.active::after {
	content: '';
	position: absolute;
	bottom: -8rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 8rpx solid transparent;
	border-right: 8rpx solid transparent;
	border-top: 8rpx solid #5ea4ff;
}

.group-list {
	flex: 1;
	height: 0;
}

.list-wrapper {
	padding: 20rpx;
	padding-bottom: env(safe-area-inset-bottom);
}

.member-item {
	background-color: #ffffff;
	margin-bottom: 20rpx;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
}

.member-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24rpx;
}

.member-left {
	display: flex;
	align-items: center;
	flex: 1;
	margin-right: 20rpx;
}

.avatar {
	width: 88rpx;
	height: 88rpx;
	border-radius: 50%;
	margin-right: 20rpx;
	background-color: #f8f9fc;
	border: 2rpx solid #f0f0f0;
}

.member-detail {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.nickname {
	font-size: 32rpx;
	color: #333333;
	font-weight: 600;
	margin-bottom: 12rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.stat-item {
	font-size: 22rpx;
	padding: 2rpx 12rpx;
	border-radius: 20rpx;
	background-color: #f8f9fc;
	display: inline-block;
}

.status-success {
	color: #07c160;
	background-color: #f0fff0;
	border: 1rpx solid #d9f7d9;
    width: 68rpx;
}

.status-fail {
	color: #ff4d4f;
	background-color: #fff0f0;
	border: 1rpx solid #ffd9d9;
    width: 68rpx;
}

.member-right {
	flex-shrink: 0;
	padding-left: 24rpx;
	border-left: 2rpx solid #f5f5f5;
}

.data-row {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	margin-bottom: 16rpx;
}

.data-row:last-child {
	margin-bottom: 0;
}

.data-label {
	font-size: 24rpx;
	color: #999999;
	margin-right: 8rpx;
}

.data-value {
	font-size: 32rpx;
	color: #ff6b6b;
	font-weight: 600;
	font-family: Arial;
}

.data-value.inactive {
	color: #cccccc;
	font-weight: normal;
}

/* 加载更多样式 */
.loading-more {
	text-align: center;
	padding: 40rpx;
	color: #999999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.loading-icon {
	width: 36rpx;
	height: 36rpx;
	border-radius: 50%;
	border: 3rpx solid #f0f0f0;
	border-top-color: #2b85ff;
	margin-right: 12rpx;
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.loading-text {
	font-size: 26rpx;
	color: #999999;
}

/* 空数据样式 */
.empty-box {
	text-align: center;
	padding: 120rpx 0;
}

.empty-icon {
	width: 240rpx;
	height: 240rpx;
	margin-bottom: 24rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999999;
	letter-spacing: 2rpx;
}

/* 无更多数据样式 */
.no-more {
	text-align: center;
	padding: 40rpx;
	color: #999999;
}

.no-more-text {
	font-size: 26rpx;
	color: #999999;
	position: relative;
	display: inline-block;
	padding: 0 40rpx;
	letter-spacing: 2rpx;
}

.no-more-text::before,
.no-more-text::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 100rpx;
	height: 1rpx;
	background: linear-gradient(to right, transparent, #eeeeee);
}

.no-more-text::after {
	right: -100rpx;
	background: linear-gradient(to left, transparent, #eeeeee);
}

.no-more-text::before {
	left: -100rpx;
}
</style>
